<template>
  <div id="expressMsg">
    <div class="expressBrand">
      <div class="logo">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2082208173,3334269038&fm=26&gp=0.jpg" alt="">
      </div>
      <div class="expressInfo">
        <span>物流状态：{{expressState}}</span>
        <span>物流公司：{{expressName}}</span>
        <span>运单号码：{{expressNum}}</span>
        <span>物流电话：{{expressTel}}</span>
      </div>
    </div>
    <van-steps direction="vertical" :active="0">
      <van-step class="steps">
        <h4>【城市】物流状态1</h4>
        <p>2016-07-12 12:40</p>
      </van-step>
      <van-step class="steps">
        <h4>【城市】物流状态2</h4>
        <p>2016-07-11 10:00</p>
      </van-step>
      <van-step class="steps">
        <h4>快件已发货</h4>
        <p>2016-07-10 09:30</p>
      </van-step>
      <van-step class="steps">
        <h4>快件已发货</h4>
        <p>2016-07-10 09:30</p>
      </van-step>
    </van-steps>
  </div>
</template>

<script>
    export default {
        name: "expressMsg",
      data(){
          return{
            expressState:'代签收',
            expressName:'顺丰快递',
            expressNum:'8865209823375',
            expressTel:'021-69777888'
          }
      }

    }
</script>

<style scoped>
  .expressBrand{
    width: 100%;
    height: 150px;
    background-color: gainsboro;
  }
  .steps{
    height: 56px;
  }
  .steps h4{
    margin-top: 0px;
  }
  .logo{
    width: 100px;
    height: 100px;
    /*background-color: cadetblue;*/
    margin: 25px 0 25px 20px;
    float: left;
  }
  .logo img{
    width: 100px;
    height: 100px;
    object-fit: cover;
  }
  .expressInfo{
    float: right;
    width: calc(100% - 140px);
    height: 100px;
    /*background-color: cadetblue;*/
    margin-top: 25px;
  }
  .expressInfo span{
    height: 25px;
    line-height: 25px;
    /*background-color: pink;*/
    display: table;
    font-weight: 300;
    font-size: 14px;
    color: #454545;

  }
</style>
